<script setup lang="ts">
import type { AreaScene } from '@/types/micro-scene';
import { ArrowRightOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import SceneEditModal from '@/views/MicroScene/home/components/Modal/SceneEditModal.vue';
import SceneCoverEditModal from '@/views/MicroScene/home/components/Modal/SceneCoverEditModal.vue';
import { deleteSceneApi } from '@/api/MicroScene/MicroSceneApi';

const props = defineProps<{
  scene: AreaScene;
}>();
const emit = defineEmits<{
  (e: 'refresh'): void;
}>();
const router = useRouter();
const editModalOpen = ref<boolean>(false);
const deleteModalOpen = ref<boolean>(false);
const coverEditModalOpen = ref<boolean>(false);

const handleEditSuccess = () => {
  emit('refresh');
};

const handleCoverEditSuccess = () => {
  emit('refresh');
};

const handleDelete = async () => {
  try {
    await deleteSceneApi(props.scene.sceneId);
    message.success('删除成功');
    emit('refresh');
  }
  catch (error: any) {
    message.error(error.message || '删除失败');
  }
  deleteModalOpen.value = false;
};

const handleNavigate = () => {
  router.push(`/micro-scene/detail/${props.scene.sceneId}`);
};
</script>

<template>
  <a-layout style="display: flex; flex-direction: column; border-radius: 0.5rem; background-color: white;" class="transition-transform duration-200 hover:shadow-lg hover:scale-95">
    <div style="display: flex; justify-content: space-between; align-items: center; margin: 0.5rem 0.5rem 0 0.5rem;">
      <span style="font-size: 1rem; font-weight: bold; display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 1; overflow: hidden; line-height: 1.5rem;">{{ scene.sceneTitle }}</span>
      <div style="display: flex; gap: 4px;">
        <a-button type="link" style="padding: 0" @click="editModalOpen = true">
          <EditOutlined />
        </a-button>
        <a-button type="link" danger style="padding: 0" @click="deleteModalOpen = true">
          <DeleteOutlined />
        </a-button>
      </div>
    </div>
    <span style="font-size: 0.8rem; padding: 0.5rem 0.5rem 0rem 0.5rem; display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; height: 3rem; line-height: 1.5;">{{ scene.introduction }}</span>

    <div style="height: 1px; background-color: #f0f0f0; margin: 0rem 0; margin-left: 0.5rem; margin-right: 0.5rem;" />

    <div style="height: 8rem; display: flex; padding: 0.5rem; gap: 0.5rem;">
      <div style="width: 30%; display: flex; align-items: center; justify-content: center;">
        <img
          :src="scene.coverUrl"
          alt="场景封面"
          style="width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem; cursor: pointer;"
          @click="coverEditModalOpen = true"
        >
      </div>

      <div style="width: 40%;">
        <div style="margin-bottom: 0.25rem; font-size: 0.8rem; color: #666;">
          标签:
        </div>
        <a-flex wrap="wrap" style="max-height: 5.5rem; overflow-y: hidden; gap: 0.5rem;">
          <a-tag v-for="tag in scene.tags" :key="tag" style="margin-right: 0rem; border: none; background-color: #f0f0f0; color: #666;">
            {{ tag }}
          </a-tag>
        </a-flex>
      </div>

      <div style="width: 30%;">
        <div style="margin-bottom: 0.25rem; font-size: 0.8rem; color: #666;">
          奖励:
        </div>
        <div style="font-size: 0.8rem; color: #1890ff;">
          {{ scene.reward }}
        </div>
      </div>
    </div>

    <div style="height: 1px; background-color: #f0f0f0; margin: 0rem 0; margin-left: 0.5rem; margin-right: 0.5rem;" />
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem;">
      <div style="display: flex; flex-direction: column; align-items: center;">
        <span style="font-size: 0.8rem; color: #666;">参加时间：{{ scene.startTime.split('T')[0] }} - {{ scene.endTime.split('T')[0] }}</span>
      </div>

      <!-- <div style="display: flex; flex-direction: column; align-items: center;">
        <span style="font-size: 0.8rem; color: #666;">参与人数：128人</span>
      </div> -->

      <a-button
        type="primary"
        icon-placement="right"
        style="font-size: 14px;border: none;"
        @click="handleNavigate"
      >
        立即报名
        <ArrowRightOutlined />
      </a-button>
    </div>
  </a-layout>

  <SceneEditModal
    :open="editModalOpen"
    :scene="scene"
    @change-open-state="editModalOpen = $event"
    @success="handleEditSuccess"
  />

  <SceneCoverEditModal
    :open="coverEditModalOpen"
    :scene-id="Number(scene.sceneId)"
    :area-id="Number(scene.areaId)"
    :current-cover-url="scene.coverUrl"
    @change-open-state="coverEditModalOpen = $event"
    @success="handleCoverEditSuccess"
  />

  <a-modal
    v-model:open="deleteModalOpen"
    title="确认删除"
    ok-text="确认"
    cancel-text="取消"
    @ok="handleDelete"
  >
    <p>确定要删除该微场景吗？此操作不可恢复。</p>
  </a-modal>
</template>

<style lang="scss" scoped>
</style>
